import React from 'react'
import { Card } from 'antd'
import ReactEcharts from 'echarts-for-react';
import echartTheme from '../echartTheme'
// import echarts from 'echarts'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入饼图和折线图
import 'echarts/lib/chart/bar'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import { axhttp } from '../../../utils/axhttp';
import { datehelper } from '../../../utils/help';

const url = {
    read: '/api/order/readx',
}
export default class Bar extends React.Component {
    state = {
        name: [
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六',
            '星期日',
        ],
        value: [
            2000,
            3000,
            5500,
            7000,
            8000,
            12000,
            20000
        ],
    }

    componentWillMount() {
        echarts.registerTheme('Imooc', echartTheme);
        this.handleReadOrder();
    }

    handleReadOrder = () => {
        axhttp.getXhr(url.read).then(res => {
            const d = datehelper.getLastWeek();
            res.data.list.forEach(i => {
                const weekDateName = datehelper.getWeekDate(i.createTime);
                const f = d.find(j => j.name === weekDateName);
                if (f) {
                    f.value = f.value + 1;
                }
            });

            this.setState({
                name: d.map(i => i.name),
                value: d.map(i => i.value),
            });
        });
    }

    getOption() {
        const { name, value } = this.state;
        let option = {
            // title: {
            //     text: '用户骑行订单'
            // },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['订单量']
            },
            xAxis: {
                data: name
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单量',
                    type: 'bar',
                    data: value
                },
                // {
                //     name: '摩拜',
                //     type: 'bar',
                //     data: [
                //         1500,
                //         3000,
                //         4500,
                //         6000,
                //         8000,
                //         10000,
                //         15000
                //     ]
                // },
                // {
                //     name: '小蓝',
                //     type: 'bar',
                //     data: [
                //         1000,
                //         2000,
                //         2500,
                //         4000,
                //         6000,
                //         7000,
                //         8000
                //     ]
                // },
            ]
        }
        return option;
    }

    render() {
        return (
            <ReactEcharts
                option={this.getOption()}
                theme="Imooc"
                notMerge={true}
                lazyUpdate={true}
            // style={{
            //     height: 500
            // }} 
            />
        );
    }
}